<template>
  <div class="container">
    <div>
      <el-row type="flex" :gutter="10" justify="space-between">
        <el-col :span="4">
          <el-form  :model="formQuery" label-width="100px">
            <el-form-item label="月份：" style="width: 250px">
              <el-date-picker
                v-model="formQuery.month"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择月"
              >
              </el-date-picker>
              <!-- <el-select
                v-model="formQuery.cyclesValue"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option
                  v-for="item in formQuery.timeCycles"
                  :key="item.index"
                  :label="item.value"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-form   label-width="100px">
            <el-form-item label="考评小组：" style="width: 250px">
              <el-select
            v-model="formQuery.groupingValue"
            placeholder="请选择考评小组"
          >
            <el-option
              v-for="item in formQuery.groupingList"
              :key="item.CLIENT_NO"
              :label="item.CLIENT_NAME"
              :value="item.CLIENT_NO"
            />
          </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-form>
            <el-button size="mini" type="primary" @click="getlistdata"
              >查 询</el-button
            >
            <el-button size="mini" type="success" @click="exportExcel"
              >导 出</el-button
            >
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      highlight-current-row
       v-loading="dialog2.loading"
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
    >
      <!-- 、所属组（可以没有，根据1.3设置来）、 -->
<!-- I, PARENTNAME上一级机构组织名称,
WORKAREA作业区域编号,AREANAME作业区域名称,WORKTYPE作业类型,WORKITEM作业项目, WORKNUM本月任务数 -->
      <!-- <el-table-column
        prop="NAME"
        label="人员姓名"
        align="center"
      ></el-table-column> -->
      <el-table-column
        prop="NAME"
        label="人员姓名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="CLIENT_NAME"
        label="所属考评组"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="AREANAME"
        label="考评区域"
        align="center"
      ></el-table-column>
      <!-- <el-table-column
        prop="WORKTYPE"
        label="考评作业类型"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="WORKITEM"
        label="考评作业项目"
        align="center"
      ></el-table-column> -->
      <el-table-column
        prop="WORKNUM"
        label="考评任务数"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit2(scope.$index, scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>

    <!-- 弹出框 -->
    <el-dialog title="考核详情" :visible.sync="dialog1.show" width="50%">
      <el-table :data="dialog1.data">
        <el-table-column
          prop="ID"
          label="任务编号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="OBJECT"
          label="被考核对象"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="SCORE"
          label="分数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="MINUS"
          label="扣分"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit2(scope.$index, scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span> -->
    </el-dialog>

    <!-- 弹出框 -->
    <!-- 考核对象概要，考核具体内容、抽样条件（是否要？）、创建日期
鼠标触碰考核对象概要，还能显示考核对象等详情 -->
    <el-dialog :title="dialog2.title" :visible.sync="dialog2.show" width="80%">
      <div style="height: 50px; ">
      <el-button style="position:absolute; right:100px;" size="mini" type="success" @click="exportExcel2"
              >导 出</el-button
            >
            </div>
      <el-table :data="dialog2.data">
        <el-table-column
          prop="WORKDATE"
          label="考核时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="TYPENAME"
          label="考核类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ITEMNAME"
          label="考核项目"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="OBJECTTYPE"
          label="考核对象类型"
          align="center"
        ></el-table-column>
        <el-table-column
        prop="OBJECTTYPENAME"
          label="考核对象"
          align="center"
        >
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ scope.row.OBJECTTYPELIST }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.OBJECTTYPENAME }}</el-tag>
            </div>
          </el-popover>
        </template>
        </el-table-column>
        <el-table-column
          prop="ITEMLEVEL"
          label="考核对象等级"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="AREANAME"
          label="考核区域"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="RANDOMTYPE"
          label="随机方式"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="LEVEL"
          label="任务等级"
          align="center"
        ></el-table-column>
        <!-- <el-table-column
          prop="NAME"
          label="考核员姓名"
          align="center"
        ></el-table-column> -->
      </el-table>
    </el-dialog>
    <el-dialog
      title="图片展示"
      :visible.sync="formImage.show"
      width="30%"
      :before-close="closeImage"
    >
      <el-image
        style="width: 100%; height: 100%"
        :src="formImage.src"
      ></el-image>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'

import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {

    return {
      formImage: {
        show: false,
        src: [],
      },
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      formQuery: {
        month: formatDate(new Date(), 'yyyy-MM'),
        groupingValue: localStorage.getItem('CLIENT_NO'),
        groupingList: [],
        cyclesValue: '日',//车牌号
        timeCycles: [{
          value: '日',
        }, {
          value: '月',
        }, {
          value: '季',
        }, {
          value: '年',
        }],
        typeValue: '全部',
        typeList: [],
        itemValue: '全部',
        itemList: [],
      },
      originalData: [],
      tableData: [],
      dialog1: {
        show: false,
        data: []
      },
      dialog2: {
        loading: false,
        show: false,
        data: []
      },
      loading: false,
      URLByTYPE: 'Worker'
    }
  },
  created () {
  },
  mounted () {
    this.GetTeamAssess()
    this.getlistdata()
  },
  methods: {
    async GetTeamAssess () {
      const { data } = await this.$Http.get('Assess/GetTeam_Assess?CLIENT_NO=' + localStorage.getItem('CLIENT_NO') + '&TYPE=2')
      this.teamList = data
      this.formQuery.groupingList = [...data];
      this.formQuery.groupingList.unshift({ "CLIENT_NO": localStorage.getItem('CLIENT_NO'), "CLIENT_NAME": "全部" })
      // this.GetAreaAssess();
    },

    //获取人员分组列表
    // async getGroupingList () {
    //   var url = this.URLByTYPE + '/GetGroupList?ClientNo=' + localStorage.getItem('CLIENT_NO') // zxdata
    //   let { data } = await this.$Http.get(url)
    //   this.formQuery.groupingList = data
    //   this.formQuery.groupingValue = data[0].CLIENT_NO

    //   this.getlistdata();
    // },
    async getlistdata () {
      this.currentPage = 1;
      var url = 'Assess/GetTaskWorkerPlan_Assess?CLIENT_NO=' + localStorage.getItem('CLIENT_NO') + '&MONTH=' + this.formQuery.month
      let { data } = await this.$Http.get(url)
      this.originalData = data
      this.screeningData()
    },
    screeningData () {
      this.currentPage = 1
      this.tableData = this.originalData
      if (this.formQuery.groupingValue !== localStorage.getItem('CLIENT_NO')) this.tableData = this.tableData.filter(item => item.CLIENT_NO === this.formQuery.groupingValue)
      // if (this.person.name) this.tableData = this.tableData.filter(item => item.NAME.includes(this.person.name))
    },
    async getDataDetail (id) {
      var url = 'Assess/GetTaskWorkerPlanDetail_Assess?ID=' + id + '&MONTH=' + this.formQuery.month
      let { data } = await this.$Http.get(url)
      this.dialog2.data = data
      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        this.formatterOBList (element, index)
      }
    },
    async formatterOBList (row, indexFrom) {
      // (string CLIENT_NO, string ITEMID, string OBJECTTYPE, string IDS)
      var url = 'Assess/GetItemObjectByID_Assess?CLIENT_NO=' + row.CLIENT_NO + '&ITEMID=' + row.CHECKITEMID + '&OBJECTTYPE=' + row.CHECKOBJECTTYPEID + '&IDS=' + row.OBJECTIDS
      let { data } = await this.$Http.get(url)
      var str = ''
      var strName = ''
      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        // if (index === 0) {
        //   this.dialog2.data[indexFrom].OBJECTTYPENAME = element.NAME
        // } 
        if (str != '' && element.NAME != '') {
          str = str +'、'
        }
        if (element.NAME != '') {
          str = str +element.NAME
        }
      }
      if (data.length > 0) {
        strName = data[0].NAME
      }
      if (data.length > 1) {
        strName = strName + '...'
      }
      this.dialog2.data[indexFrom].OBJECTTYPENAME = strName
      this.dialog2.data[indexFrom].OBJECTTYPELIST = str
      // console.log(this.dialog2.data[indexFrom])
    },
    // 导出Excel
    exportExcel () {
      let excelName = '考评人员排班信息列表'
      var tHeader = ['人员姓名', '所属考评组', '考评区域', '考评任务数']

      var filterVal = ['NAME', 'CLIENT_NAME', 'AREANAME', 'WORKNUM']
      // if (this.form.queryType === '1') {
      //   tHeader = ['人员类型', '现有人员数', '出勤人员数', '出勤比率']
      //   filterVal = ['CAR_TYPE', 'ALLNUM', 'CURRENTNUM', 'currentRatio']
      // }
      export2Excel(tHeader, filterVal, this.tableData, excelName)
    },
    exportExcel2 () {
      let excelName = this.dialog2.title + '信息'
      var tHeader = ['考核时间', '考核类型', '考核项目', '考核对象类型', '考核对象', '考核对象等级'
      , '考核区域', '随机方式', '任务等级']

      var filterVal = ['WORKDATE', 'TYPENAME', 'ITEMNAME', 'OBJECTTYPE', 'OBJECTTYPELIST', 'ITEMLEVEL'
      , 'AREANAME', 'RANDOMTYPE', 'LEVEL']
      export2Excel(tHeader, filterVal, this.dialog2.data, excelName)
    },
    formatterMinus (row) {
      // row.SCORE.toFixed(parseFloat(6))
      return parseInt(row.PROBLEM0) + parseInt(row.PROBLEM1) + parseInt(row.PROBLEM2) + parseInt(row.PROBLEM3) + parseInt(row.PROBLEM4) + parseInt(row.PROBLEM5) + parseInt(row.PROBLEM6)
    },
    bigImage (row) {
      this.formImage.src = row.Image2
      this.formImage.show = true
    },
    closeImage () {
      this.formImage.show = false;
    },
    //详情
    handleEdit (index, row) {
      this.dialog1.show = true
      //   this.idx = index;
      //   this.form = row;
      //   this.editVisible = true;
    },
    handleEdit2 (index, row) {
      this.dialog2.title = row.NAME + '的排班详情'
      this.dialog2.loading = true
      this.getDataDetail(row.ID)
      var timeout = 1000
      if (row.WORKNUM > 1) {
        timeout = 1500
      }
      if (row.WORKNUM > 3) {
        timeout = 2000
      }
      setTimeout(() => {
        this.dialog2.show = true
        this.dialog2.loading = false
      }, timeout);
      //   this.idx = index;
      //   this.form = row;
      //   this.editVisible = true;
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  width: 350px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.el-form-item label {
  width: 80px;
}
</style>